<template>
    <div class="containt">
        <span class="tip">{{box}}</span>
        <div class="titleItem">{{title}}</div>
        <span class="border"></span>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '这是一个标题'
    },
    box: {
      type: String,
      default: 'TITLE'
    }
  }
}
</script>

<style lang="less" scoped>
.containt {
    width: 100%;
    text-align: center;
    padding-top: 2vh;
    .tip {
        display: inline-block;
        position: relative;
        padding: 1vh 1vh;
        margin: 0 auto 1vh;
        font-size: 3vh;
        background: #03a9f4;
        color: #fff;
    }
    .tip:after {
        position: absolute;
        width: 0;
        height: 0;
        left: 48%;
        bottom: -1vh;
        content: "";
        border-style: solid;
        border-width: 1vh 1vh 0;
        border-color: #03a9f4 transparent;
    }
    .titleItem {
        padding: 1vh 0 1vh;
        font-family: Overlock,cursive;
        color: #2f2c06;
        font-size: 5vh;
    }
    .border {
        display: block;
        width: 20%;
        height: 0.5vh;
        position: relative;
        margin: 0 auto 3vh;
        background: #8c8989;
    }
    .border:after {
        position: absolute;
        top: 0;
        left: 30%;
        content: " ";
        width: 40%;
        height: 1vh;
        margin-top: -0.3vh;
        background: #03a9f4;
    }
}
</style>
